<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-06-02 10:48:03
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-07-05 11:55:46
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/customImage/customImage.vue
 * @Description: 自定义图片组件
-->
<script setup>
import { ref, onMounted } from "vue"
import CustomLoading from "@/components/customLoading/customLoading.vue"
const props = defineProps({
    roundedClass: { // 设置圆角的类名 rounded rounded-full   tailwind css的圆角类名
        type: String,
        default: ""
    },
    borderRadius: { //  指定圆角大小
        type: String,
        default: ""
    },
    width: { // 图片外部box的宽度
        type: String,
    },
    height: { // 图片外部box的高度
        type: String,
    },
    aspectRatio: { // 宽高比
        type: String,
        default: '1'
    },
    src: { // image src
        type: String,
        require: true
    },
    bgColor: { // loading的背景颜色
        type: String,
        default: "#f6f6f6"
    },
    errorImageWidth: { // error图片的宽度
        type: String,
        default: '2.5rem'
    },
    // isPreview: { // 是否启用图片预览
    //     type: Boolean,
    //     default: false,
    // },
    pirctures: { // 预览的图片数组
        type: Array,
        default: () => {
            return []
        },
    },
    current: { // 当前预览的图片的下标值
        type: Number,
        default: 0
    },
    customStyle: { //  自定义属性
        type: Object,
        default: () => {
            return {}
        }
    }
})
const emit = defineEmits(['imgload'])

let status = ref('loading') // loading 加载中  success 加载成功  error 加载失败
let style = ref({})

onMounted(() => {
    initStyle()
})

/**
 * @description: 初始化样式
 * @return {*}
 */
const initStyle = function () {
    if (Object.keys(props.customStyle).length > 0) { // 存在自定义样式时，单独设置的width，height将失效
        style.value = {
            ...props.customStyle
        }
        return
    }
    if (props.aspectRatio) { // 宽高比存在时 高度的设置将失效
        style.value = {
            aspectRatio: props.aspectRatio,
            borderRadius: props.borderRadius
        }
        props.width ? style.value.width = props.width : style.value.height = props.height
    } else {
        style.value = {
            width: props.width,
            height: props.height,
            borderRadius: props.borderRadius
        }
    }
}


const loadFunc = function () {
    status.value = 'success'
    emit('imgload')
    // console.log("加载成功", status.value)
}
/**
 * @description: 图片加载错误
 * @return {*}
 */
const errorFunc = function () {
    // console.log("加载失败")
    status.value = 'error'
}

</script>
<template>
    <div class="relative" :class="[roundedClass]" :style="{ ...style }" style="overflow: hidden;">
        <custom-loading v-if="status == 'loading'" :bgColor='bgColor'></custom-loading>
        <img :src="src" alt="" class="object-cover w-full h-full duration-1000 "
            :style="{ opacity: status == 'success' ? 1 : 0 }" @load='loadFunc' @error='errorFunc'>
        <div class="absolute top-0 bottom-0 left-0 right-0 z-10 flex items-center justify-center"
            :style="{ background: bgColor }" v-if="status == 'error'">
            <img src="./images/error.png" alt="" style="height: auto;" :style="{ width: errorImageWidth }">
        </div>
    </div>
</template>



<style>
.hidden {
    opacity: 0;
}

.show {
    opacity: 1;
}
</style>
